<template>
  <div class="page">
    <div class="van-nav-head">
      <van-nav-bar title="复杂的验证" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
    </div>
    <div class="padding">
      <div class="form-box">
        <van-field v-model="formData.username" placeholder="请输入真实姓名" label="姓名"/>

        <van-field v-model="formData.address"
                   @click="showArea=true"
                   placeholder="请选择地址"
                   type="text" readonly
                   right-icon="arrow"
                   label="地址"/>

        <van-field v-model="formData.addrdetails" placeholder="请输入地址详情" label="地址详情"/>

        <!-- 联系方式 -->
        <van-field v-model="formData.contact" placeholder="qq号微信号手机号均可" type="text" label="联系方式"/>

        <!-- 输入密码 -->
        <van-field v-model="formData.password"
                   placeholder="请输入密码"
                   :type="showPass?'text':'password'"
                   :right-icon="showPass?'eye-o':'closed-eye'"
                   @click-right-icon="onShowPass('password')"
                   label="密码"/>

        <!-- 确认密码 -->
        <van-field v-model="formData.passwordok"
                   placeholder="请确认密码"
                   :type="showPassok?'text':'password'"
                   :right-icon="showPassok?'eye-o':'closed-eye'"
                   @click-right-icon="onShowPass('passwordok')"
                   label="确认密码"/>
      </div>

      <div class="padding-tb-lg">
        <van-button block type="info" @click="onSubmit">
          提交
        </van-button>
      </div>
    </div>

    <!--    地址选择-->
    <van-popup v-model="showArea" position="bottom">
      <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script type="es6">

let validator = {
  "username": {
    name: "姓名",
    required: {msg: "请输入真实姓名"},
    type: "userName",
  },
  "address": {
    name: "地址",
    required: {msg: "请选择地址"},
  },
  "addrdetails": {
    name: "地址详情",
    minLength: 2,
  },
  "contact": {
    name: "联系方式",
    type: "qqNum|wxNum|phone"
  },
  "password": {
    name: "密码",
    type: {
      value: "password",
      msg: "密码必须是6-16位之间"
    }
  },
  "passwordok": {
    name: "确认密码",
    callback: function (data, self) {
      if (data.password !== data.passwordok) {
        return "两次密码不一致"
      } else {
        return false;
      }
    }
  }
}

import areaList from "../../../assets/js/area.js"

export default {
  name: "",
  components: {},
  data() {
    return {
      showArea: false,
      areaList,
      showPass: false,
      showPassok: false,
      formData: {
        "username": "ok-mini",
        "address": "北京市-北京市-东城区",
        "addrdetails": "",
        "contact": "12312312",
        "password": "123123",
        "passwordok": ""
      }
    };
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      let formData = this.formData;
      let self = this;
      let bool = this.$utils.formValidator(formData, validator, self);
      if (bool) {
        this.$toast.error(bool.msg);
      } else {
        this.$dialog.alert({
          title: 'ok-mini 表单验证',
          message: JSON.stringify(formData),
        });
      }
    },
    onConfirm(e) {
      let address = e.map((item) => item.name);
      this.showArea = false;
      this.formData.address = address.join("-");
    },
    onShowPass(type) {
      if ("password" == type) {
        this.showPass = !this.showPass;
      } else if ("passwordok" == type) {
        this.showPassok = !this.showPassok;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  border-radius: 10px;
  overflow: hidden;
}
</style>